<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5; padding: 0 8px;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="daka"
			:style="{ '--app-radius': '8px', '--app-color': app_color, '--daka-bg-color1': opaqueColor1, '--daka-bg-color2': opaqueColor2 }">
			<!-- 个人信息 -->
			<view class="person-info">
				<view class="avatar">
					<image style="width: 48px; height: 48px;" :src="userinfo.pic" mode="widthFix" />
				</view>
				<view class="info">
					<view class="name u-line-1">{{ userinfo.showname }}</view>
				</view>
				<!-- 跳转路由到clock_records -->
				<view class="more" @click="navigateToClockRecords">
					<view>打卡记录</view>
					<view><u-icon name="arrow-right" size="16"></u-icon></view>
				</view>
			</view>

			<!-- 考勤时间 -->
			<view class="work-time">
				<view class="title">
					<view class="left">考勤时间</view>
					<view class="right">{{ message }}</view>
				</view>
				<view class="content">
					<view class="item">
						<view>上班时间:</view>
						<view>{{ userInfo.start ? userInfo.start : infoData.work_start }}</view>
					</view>
					<view class="item">
						<view>下班时间:</view>
						<view>{{ userInfo.end ? userInfo.end : infoData.work_end }}</view>
					</view>
				</view>
			</view>

			<view class="controll">
				<view class="tabs" v-if="!isWork">
					<view class="item" @click="officeMode = false" :class="!officeMode ? 'active' : ''">上下班打卡</view>
					<!-- <view class="item" @click="officeMode = true" :class="officeMode ? 'active' : ''">外勤打卡</view> -->
				</view>
				<view class="show" v-if="!isWork">
					<view class="top">
						<view class="item" :style="{ 'background-color': goOroffMode ? colorList[17] : colorList[13] }"
							@click="editColor(false)">
							<view class="title">
								<view>上班时间:{{ userInfo.start ? userInfo.start : infoData.work_start }}</view>
							</view>
							<view class="record">
								<u-icon :color="userInfo.work_start ? app_color : '#999'" size="12"
									name="checkmark-circle-fill"></u-icon>
								<view>{{ userInfo.work_start ? userInfo.work_start :
									infoData.work_start }}</view>
								<view style="white-space: nowrap;">{{ userInfo.start_status == 0 ? '未打卡' : '已打卡' }}</view>
								<view class="tag"
									:style="{ 'background-color': userInfo.start_status == 0 ? '#999' : userInfo.late == 0 ? app_color : '#FF8B01', 'white-space' : 'nowrap'}">
									{{ userInfo.start_status == 0 ? '缺卡' : userInfo.late == 0 ? '正常' : '迟到' }}
								</view>
							</view>
						</view>
						<view class="item" :style="{ 'background-color': !goOroffMode ? colorList[17] : colorList[13] }"
							@click=" editColor(true)">
							<view class="title">
								<view>下班时间:{{ userInfo.end ? userInfo.end : infoData.work_end }}</view>
							</view>
							<view class="record">
								<u-icon :color="!userInfo.work_end ? '#999' : app_color" size="12"
									name="checkmark-circle-fill"></u-icon>
								<view>{{ userInfo.work_end ? userInfo.work_end :
									infoData.work_end }}</view>
								<view style="white-space: nowrap;">{{ userInfo.end_status == 0 ? '未打卡' : '已打卡' }}</view>
								<view class="tag"
									:style="{ 'background-color': userInfo.end_status == 0 ? '#999' : userInfo.early == 0 ? app_color : '#FF8B01', 'white-space' : 'nowrap'}">
									{{ userInfo.end_status == 0 ? '缺卡' : userInfo.early == 0 ? '正常' : '早退' }}
								</view>
							</view>
						</view>
					</view>
					<view class="big-btn-daka">
						<view style="font-weight: bold; color: 000; margin: 48px 0 36px; text-align: center;">
							{{ goOroffMode ? '下班打卡' : '上班打卡' }}</view>
						<view class="big-btn" @click="submitAttendance">
							<view class="z-index-1">{{ newTime }}</view>
							<view class="z-index-1">{{ !goOroffMode ? userInfo.start_status == 0 ? '打卡' : '打卡成功' :
								userInfo.end_status == 0
									? '打卡' : '打卡成功' }}</view>
						</view>
						<view class="alert">
							<view class="flex" v-if="infoData.position_status == 1 && isInPosition">
								<view><u-icon name="checkmark-circle-fill" size="16" :color="app_color"></u-icon></view>
								<view>已进入指定地址</view>
							</view>
							<view class="flex" v-if="infoData.position_status == 1 && !isInPosition">
								<!-- 刷新 -->
								<image :src="'data:image/svg+xml;base64,' + shuaxingIcon" mode="scaleToFill"
									style="width: 16px; height: 16px; border-radius: 50%;"
									:style="{ 'background-color': app_color, }"
									v-if="infoData.position_status == 1 && !isInPosition && !isRefreshing"
									@click="refreshLocation(); if (infoData.wifi_status == 1) refreshWifi()" />
								<u-loading-icon v-if="infoData.position_status == 1 && !isInPosition && isRefreshing"
									:color="app_color" size="16" mode="circle"></u-loading-icon>
								<view>
									未进入打卡范围...
								</view>
							</view>
							<!-- #ifdef MP-WEIXIN -->
							<view class="flex" v-if="infoData.wifi_status == 1 && connected">
								<view><u-icon name="checkmark-circle-fill" size="16" :color="app_color"></u-icon></view>
								<view>已连接指定WiFi:{{ connectedWifi.SSID }}</view>
							</view>
							<view class="flex" v-if="infoData.wifi_status == 1 && !connected">
								<image :src="'data:image/svg+xml;base64,' + shuaxingIcon" mode="scaleToFill"
									style="width: 16px; height: 16px; border-radius: 50%;"
									:style="{ 'background-color': app_color, }" v-if="!isRefreshingWifi"
									@click="refreshWifi(); if (infoData.position_status == 1) refreshLocation()" />
								<u-loading-icon v-if="isRefreshingWifi" :color="app_color" size="16"
									mode="circle"></u-loading-icon>
								<view>未连接指定WiFi，正在搜索...</view>
							</view>
							<!-- #endif -->
						</view>

						<!-- #ifndef MP-WEIXIN -->
						<view class="alert" v-if="infoData.wifi_status == 1">wifi打卡功能仅支持微信小程序</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="noWork" v-if="isWork">
					<image style="width: 160px; height: 160px;" :src="'data:image/svg+xml;base64,' + noWorkIcon"
						mode="scaleToFill" />
					<view>今日休息，无需打卡</view>
				</view>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			temp: {},
			// true 室内， false 外勤
			officeMode: false,
			// 上班打卡还是下班 0 1
			goOroffMode: false,
			newTime: '',
			goStatus: 0, // 上班打卡状态 0 未打卡 1 打卡 2 异常
			offStatus: 0, // 下班打卡状态 0 未打卡 1 打卡 2 异常
			// 公司工作信息
			infoData: {
				"work_start": "", // 上班时间
				"work_end": "", // 下班时间
				"wifi_status": 0, // wifi 1 开启 0 关闭
				"wifi_bssid": [],
				"position_status": 0, // 位置打卡 1 开启 0 关闭
				"position_radius": 0, // 位置打卡半径
				"position": { // 位置
					"center": [],
				},
				"week": [],
				"must_clock": [],
				"no_clock": []
			},
			// 员工打卡信息
			userInfo: {
				"work_start": 0, // 上班时间
				"work_end": 0, // 下班时间
				"start_status": 0, // 上班打卡状态 0 未打卡 1 打卡
				"end_status": 0, // 下班打卡状态 0 未打卡 1 打卡
				"date": "", // 日期
				"desc": "",
				"status": 0,// 0 待打卡 1 今日打卡全部完成
				"late": 0, // 迟到
				"early": 0, // 早退
				"start": "",
				"end": ""
			},
			connected: false,
			connectedWifi: {},
			chidao: false, // 迟到
			// 防止频繁获取地址
			isInPosition: false, // 是否在指定位置
			isRefreshing: false, // 加载状态
			// 防止频繁刷新 WiFi
			isRefreshingWifi: false,
			timer: null, // 定时器
			// 是否上班
			isWork: false, // 上班 false 放假 true
			noWorkIcon: 'PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4xNjc2IDUxLjkxMTFDNzguNjEyMSAzMiA0MC45MjMyIDI0Ljg4ODkgNTUuMTQ1NCA5LjI0NDQ0QzQ4LjAzNDMgMTAuNjY2NyA0MS42MzQzIDIzLjQ2NjcgNDguNzQ1NCAzMC41Nzc4QzU1LjE0NTQgMzYuMjY2NyA1NC40MzQzIDQ1LjUxMTEgNTAuMTY3NiA1MS45MTExWk02Ny4yMzQzIDUxLjkxMTFDMTAwLjY1NyAzMC41Nzc4IDU1Ljg1NjUgMTkuMiA3My42MzQzIDBDNjQuMzg5OSAxLjQyMjIyIDU3Ljk4OTggMTYuMzU1NiA2Ni41MjMyIDI0Ljg4ODlDNzIuMjEyMSAzMC41Nzc4IDcyLjkyMzIgNDQuMDg4OSA2Ny4yMzQzIDUxLjkxMTFaTTEyMS45OSA3NS4zNzc4QzEyMS45OSA3NC42NjY3IDEyMS4yNzkgNzMuOTU1NiAxMjEuMjc5IDczLjI0NDRWNzIuNTMzM0MxMjAuNTY4IDcxLjgyMjIgMTIwLjU2OCA3MS4xMTExIDExOS44NTcgNzAuNEMxMTkuMTQ1IDY5LjY4ODkgMTE5LjE0NSA2OC45Nzc4IDExOC40MzQgNjguMjY2N0gxMTcuNzIzQzExNy4wMTIgNjcuNTU1NiAxMTYuMzAxIDY2Ljg0NDQgMTE1LjU5IDY2Ljg0NDRDMTE0Ljg3OSA2Ni4xMzMzIDExNC4xNjggNjYuMTMzMyAxMTMuNDU3IDY1LjQyMjJDMTEyLjAzNCA2NC43MTExIDEwOS45MDEgNjQgMTA4LjQ3OSA2NEgxMDUuNjM0QzEwNC45MjMgNjEuMTU1NiAxMDIuMDc5IDU3LjYgOTkuMjM0MyA1Ny42SDIzLjg1NjVDMTkuNTg5OSA1Ni4xNzc4IDE2Ljc0NTQgNjAuNDQ0NCAxNi43NDU0IDY0VjY2Ljg0NDRDMTcuNDU2NSA3NS4zNzc4IDIwLjMwMSAxMDMuODIyIDM5LjUwMSAxMTUuOTExQzQwLjkyMzIgMTE2LjYyMiA0Mi4zNDU0IDExNy4zMzMgNDMuNzY3NiAxMTcuMzMzSDc2LjQ3ODdDNzguNjEyMSAxMTcuMzMzIDgwLjc0NTQgMTE2LjYyMiA4Mi44Nzg3IDExNC40ODlDODcuODU2NSAxMDkuNTExIDkxLjQxMjEgMTAzLjgyMiA5NC4yNTY1IDk5LjU1NTZDOTQuOTY3NiA5OS41NTU2IDk1LjY3ODcgOTkuNTU1NiA5Ny4xMDEgMTAwLjI2N0gxMDQuMjEyQzEwNC45MjMgMTAwLjI2NyAxMDYuMzQ1IDk5LjU1NTYgMTA3LjA1NyA5OS41NTU2QzExNy43MjMgOTYgMTI0LjgzNCA4NS4zMzMzIDEyMS45OSA3NS4zNzc4Wk0xMDQuMjEyIDkyLjQ0NDRDMTAzLjUwMSA5Mi40NDQ0IDEwMi43OSA5My4xNTU2IDEwMi4wNzkgOTMuMTU1Nkg5OS4yMzQzSDk3LjEwMUMxMDIuMDc5IDgzLjkxMTEgMTAzLjUwMSA3Ni4wODg5IDEwMy41MDEgNzAuNEMxMDcuNzY4IDcxLjExMTEgMTEyLjAzNCA3My45NTU2IDExMy40NTcgNzguMjIyMkMxMTUuNTkgODMuOTExMSAxMTEuMzIzIDkwLjMxMTEgMTA0LjIxMiA5Mi40NDQ0Wk02LjA3ODc0IDEyMC4xNzhDNi4wNzg3NCAxMjAuMTc4IDQuNjU2NTIgMTI4IDEzLjkwMSAxMjhIMTA0LjkyM0MxMTIuMDM0IDEyOCAxMTEuMzIzIDEyMC4xNzggMTExLjMyMyAxMjAuMTc4SDYuMDc4NzRaIiBmaWxsPSIjMzY1Q0QyIi8+Cjwvc3ZnPg==',
			shuaxingIcon: 'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIwNl81MTYyKSI+CjxwYXRoIGQ9Ik03Ljk5OTk4IDAuNUMzLjU4ODg2IDAuNSAwIDQuMDg4ODcgMCA4LjQ5OTk5QzAgMTIuOTExMSAzLjU4ODg2IDE2LjUgOCAxNi41QzEyLjQxMTEgMTYuNSAxNiAxMi45MTExIDE2IDguNDk5OTlDMTYgNC4wODg4NSAxMi40MTExIDAuNSA3Ljk5OTk4IDAuNVpNNy45NTM3OSAxMi44MjI0QzYuMTkwNDQgMTIuODIyNCA0LjY4Nzg0IDExLjcwMTUgNC4xMDk2NCAxMC4xMzY1TDQuMTE1NSAxMC4xMzQxQzQuMDc5NTYgMTAuMDYxOSA0LjA1NDk1IDkuOTgzMzggNC4wNTQ5NSA5Ljg5NzIxQzQuMDU0OTUgOS41OTkyNCA0LjI5NjQ4IDkuMzU3NjkgNC41OTQ0NiA5LjM1NzY5QzQuODM0MTMgOS4zNTc2OSA1LjAzMDQ1IDkuNTE2NTggNS4xMDA4MSA5LjczMjc3TDUuMTA4MzcgOS43Mjk2N0M1LjUyNDg4IDEwLjkwMSA2LjY0MTMyIDExLjc0MzMgNy45NTM3OSAxMS43NDMzQzkuNjIwMjggMTEuNzQzMyAxMC45NzU5IDEwLjM4NzcgMTAuOTc1OSA4LjcyMTIxQzEwLjk3NTkgNy4wNTQ3MiA5LjYyMDI4IDUuNjk5MDggNy45NTM3OSA1LjY5OTA4QzcuNTg4MDcgNS42OTkwOCA3LjI0MDA5IDUuNzcwMzMgNi45MTU0MiA1Ljg5MDA0TDcuMjk1NzUgNi42MTkyOUM3LjM0MDI2IDYuNjY3MjIgNy4zNjc2NiA2LjczMTc1IDcuMzY3NjYgNi44MDI2M0M3LjM2NzY2IDYuOTUzMyA3LjIxNzIzIDcuMDY5NzIgNy4wOTI2MyA3LjA3MjM3SDcuMDg3MUM3LjA4MzE2IDcuMDcyMzcgNy4wNzk0NCA3LjA3MjM3IDcuMDc1NSA3LjA3MjEzTDQuMzgwMzEgNi45NTY0NUM0LjI4NDE1IDYuOTUyMjYgNC4xOTcyMSA2Ljg5NzIgNC4xNTI3IDYuODExNTlDNC4xMDgxOSA2LjcyNjIyIDQuMTEyNjYgNi42MjM0OCA0LjE2NDI5IDYuNTQyMTFMNS42MTIxMyA0LjI2NTc0QzUuNjYzNzcgNC4xODQ2IDUuNzU1NDQgNC4xMzc3MyA1Ljg1MTM2IDQuMTQxMTZDNS45NDc1MiA0LjE0NTM1IDYuMDM0NDMgNC4yMDA0NSA2LjA3ODkzIDQuMjg2MDZMNi40MTE1IDQuOTIzNzFDNi44ODgxMyA0LjcyOTQxIDcuNDA4MTYgNC42MjAwOCA3Ljk1MzgxIDQuNjIwMDhDMTAuMjE1MSA0LjYyMDA4IDEyLjA1NSA2LjQ1OTkyIDEyLjA1NSA4LjcyMTI1QzEyLjA1NSAxMC45ODI2IDEwLjIxNTEgMTIuODIyNCA3Ljk1Mzc5IDEyLjgyMjRaIiBmaWxsPSIjZmZmIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjA2XzUxNjIiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=',
			message: '',
			opaqueColor1: '', // 透明浅色
			opaqueColor2: '', // 不透明深色
		};
	},
	mounted() {
		if (!this.isWork) {
			// #ifdef MP-WEIXIN
			if (this.infoData.wifi_status == 1 && !this.connected) {
				this.initWifi();
			};
			this.listenWifiChange();
			// #endif
			if (this.infoData.position_status == 1 && !this.isInPosition) {
				this.refreshLocation();
			};
			this.timer = setInterval(() => {
				// 格式化时间戳 9:00:00 或 18:00:00
				let date = new Date();
				this.newTime = this.formatTime(date);
				if (this.userInfo.start_status == 0 && !this.chidao && this.formatTimeToTimestamp(this.infoData.work_start) < this.formatTimeToTimestamp(this.newTime)) {
					this.chidao = true;
				}
			}, 1000);
		}
	},
	onLoad() {
		this.newTime = this.formatTime(new Date());
		this.getInfoData();
		// 判断是否迟到
		if (this.userInfo.start_status == 0 && !this.chidao && this.formatTimeToTimestamp(this.infoData.work_start) < this.formatTimeToTimestamp(this.formatTime(new Date()))) {
			this.chidao = true;
		}
		this.editColor(this.goOroffMode);
	},
	onShow() {
		// 用户熄屏之后亮屏如果没有获取到位置则触发获取位置
		if (!this.isWork) {
			if (this.infoData.position_status == 1 && !this.isInPosition) {
				this.refreshLocation();
			}
			// #ifdef MP-WEIXIN
			if (this.infoData.wifi_status == 1 && !this.connected) {
				this.checkConnection();
			}
			// #endif
		}
	},
	methods: {
		editColor(status) {
			this.goOroffMode = status;
			if (!this.goOroffMode) {
				if (this.chidao) {
					this.opaqueColor1 = '#FF8B0150';
					this.opaqueColor2 = '#FF8B01';
				} else {
					if (this.userInfo.late == 0) {
						this.opaqueColor1 = this.colorList[12];
						this.opaqueColor2 = this.colorList[0];
					} else {
						this.opaqueColor1 = '#FF8B0150';
						this.opaqueColor2 = '#FF8B01';
					}
				}
			} else {
				if (this.userInfo.early == 0) {
					this.opaqueColor1 = this.colorList[12];
					this.opaqueColor2 = this.colorList[0];
				} else {
					this.opaqueColor1 = '#FF8B0150';
					this.opaqueColor2 = '#FF8B01';
				}
			}
		},
		// 获取用户打卡信息
		getUserDakaInfo() {
			this.moxiPost(
				'/plugin/oa/user/clockin/init_info', (res) => {
					if (res.data) {
						console.log('获取用户打卡信息',res.data);
						
						this.userInfo = res.data;
						// 判断是否为0 转string
						if (res.data.work_start != 0) {
							this.userInfo.work_start = this.formatTimeToHourMinute(this.formatTime(res.data.work_start * 1000));
						} else {
							this.userInfo.work_start = '';
						}
						if (res.data.end_start != 0) {
							this.userInfo.work_end = this.formatTimeToHourMinute(this.formatTime(res.data.work_end * 1000));
						} else {
							this.userInfo.work_end = '';
						}
					}
				}
			);

		},
		getInfoData() {
			// 获取公司信息
			this.moxiPost(
				'/plugin/oa/user/clockin/getsetting', (res) => {
					if (res.data) {
						console.log('获取公司信息',res.data);
						this.infoData = res.data;
						this.workDay();
						this.getUserDakaInfo();
					}
				}
			);
		},
		navigateToClockRecords() {
			uni.navigateTo({
				url: '/plugin_oa/clock_records'
			});
		},
		// 工作日判断打卡 true 当天需要打卡 false 当天不需要打卡
		workDay() {
			let date = new Date();
			// 获取当前时间戳 => 2025-05-01 进行以下判断
			let year = date.getFullYear();
			let month = (date.getMonth() + 1).toString().padStart(2, '0');
			let day = date.getDate().toString().padStart(2, '0');
			let dateStr = `${year}-${month}-${day}`;

			// 先判断 当天日期 == this.infoData.must_clock 需要打卡
			if (this.infoData.must_clock.includes(dateStr)) {
				this.isWork = false;
				this.message = '今日调休上班需打卡'
				return;
			}
			// 再判断 当天日期 == this.infoData.no_clock 不需要打卡
			if (this.infoData.no_clock.includes(dateStr)) {
				this.isWork = true;
				this.message = '今日放假无需打卡'
				return;
			}
			// 获取当前时间周几 1 2 3 4 5 6 7 周一至周日
			let week = date.getDay();
			if (week === 0) {
				week = 7;
			}
			let weekArray = [];
			for (let i = 0; i < this.infoData.week.length; i++) {
				weekArray.push(parseInt(this.infoData.week[i]));
			}

			// 最后判断是否在工作日周一至周五或周六
			if (weekArray.includes(week)) {
				this.isWork = false;
				this.message = '工作日需打卡'
				return;
			} else {
				this.isWork = true;
				this.message = '休息日无需打卡'
				return;
			}
		},
		// 初始化WiFi模块（微信小程序专用）
		initWifi() {
			// #ifdef MP-WEIXIN
			wx.startWifi({
				success: () => {
					this.checkConnection();
				},
				fail: (err) => {
					if (err.errCode === 12005) {
						this.msg('请开启WiFi');
					}
				}
			})
			// #endif
		},
		// 手动刷新 WiFi
		refreshWifi() {
			// #ifdef MP-WEIXIN
			if (this.isRefreshingWifi) return;
			this.isRefreshingWifi = true;
			this.initWifi();
			setTimeout(() => {
				this.isRefreshingWifi = false;
			}, 3000); // 3 秒内禁止再次点击
			// #endif
		},
		// 检查当前连接状态
		checkConnection() {
			// #ifdef MP-WEIXIN
			wx.getConnectedWifi({
				success: (res) => {
					if (this.infoData.wifi_bssid.includes(res.wifi.BSSID)) {
						this.connected = true
						this.connectedWifi = res.wifi
					} else {
						this.connected = false
					}
				},
				fail: (err) => {
					if (err.errCode == 12006) {
						this.msg('请开启手机定位!')
					} else {
						this.msg(err.errMsg)
					}
					this.connected = false;
				}
			})
			// #endif
		},
		// 监听 WiFi 变化
		listenWifiChange() {
			// #ifdef MP-WEIXIN
			wx.onWifiConnected(() => {
				this.checkConnection();
			});
			// #endif
		},
		// 刷新地址
		refreshLocation() {
			this.isRefreshing = true;
			this.moxiGetLocation((res) => {
				console.log(res);
				const distance = this.getDistance(
					res.latitude,
					res.longitude,
					this.infoData.position.center[1],
					this.infoData.position.center[0],
					false
				);
				// position_radius单位是m 
				this.isInPosition = distance <= this.infoData.position_radius;
				// 提示用户不在指定位置
				if (!this.isInPosition) {
					this.msg('非指定位置，请重新获取');
					this.isRefreshing = false;
				}
			})
		},
		// 提交打卡记录
		submitAttendance() {
			let self = this;
			// 判断是否为工作日
			if (this.isWork) {
				self.msg(this.message)
				return
			}

			if (this.userInfo.status == 1) {
				self.msg('今日已完成打卡,请勿重复打卡')
				return
			}
			// 判断是否重复打卡
			if (!this.goOroffMode) {
				// 上班
				if (this.userInfo.work_start) {
					self.msg('上班已打卡,请勿重复打卡')
					return
				}
			} else {
				// 上班未打卡不允许下班打卡
				if (!this.userInfo.work_start) {
					self.msg('上班未打卡，无法下班打卡')
					return
				}

				if (this.userInfo.work_end) {
					self.msg('下班已打卡,请勿重复打卡')
					return
				}

				// 下班打卡时，检查当前时间是否早于下班时间
				const currentTime = this.formatTimeToTimestamp(this.newTime);
				const endTime = this.formatTimeToTimestamp(this.infoData.work_end);
				if (currentTime < endTime) {
					this.isBox('提示', () => {
						this.proceedWithCheckIn();
					}, '当前打卡将记为早退,是否确认?')
					return;
				}
			};
			this.proceedWithCheckIn();
		},
		proceedWithCheckIn() {
			let self = this;
			if (this.infoData.position_status == 1 && !this.isInPosition) {
				self.msg('请到达指定地址')
				return
			}
			if (!this.connected && this.infoData.wifi_status == 1) {
				self.msg('请连接到指定WiFi')
				return
			}
			this.moxiGetLocation((res) => {
				this.moxiPost(
					'/plugin/oa/user/clockin/clock', { 'goOroffMode': this.goOroffMode ? 1 : 0, }, (res) => {
						this.userInfo = res.data;
						// 判断是否为0 转string
						if (res.data.work_start != 0) {
							this.userInfo.work_start = this.formatTime(res.data.work_start * 1000);
						} else {
							this.userInfo.work_start = '';
						}
						if (res.data.end_start != 0) {
							this.userInfo.work_end = this.formatTime(res.data.work_end * 1000);
						} else {
							this.userInfo.work_end = '';
						};
						self.msg(res.hint)
					}
				);
			})
		},
		// string 转当天时间戳 9:00:00 -> 1746028800
		formatTimeToTimestamp(time) {
			// 非空判断
			if (!time) {
				return 0;
			}
			const [hour, minute, second] = time.split(':');
			const date = new Date();
			date.setHours(hour);
			date.setMinutes(minute);
			date.setSeconds(0);
			return Math.floor(date.getTime() / 1000);
		},
		// 格式化当前时间 ms => 9:00:00
		formatTime(date) {
			// 非空判断
			if (!date) {
				return 0;
			}
			// 若传入的不是 Date 对象，则尝试转换
			if (!(date instanceof Date)) {
				date = new Date(date);
			}
			// 检查转换后的对象是否为有效的 Date 对象
			if (isNaN(date.getTime())) {
				return;
			}
			const hour = date.getHours();
			const minute = date.getMinutes();
			const second = date.getSeconds();
			// 补零
			const format = (value) => {
				return value < 10 ? `0${value}` : value;
			};
			return `${hour}:${format(minute)}:${format(second)}`;
		},
		// 9:00:00 转换为 9:00
		formatTimeToHourMinute(time) {
			// 非空判断
			if (!time) {
				return 0;
			}
			const [hour, minute, second] = time.split(':');
			return `${hour}:${minute}`;
		},
	},
	beforeUnmount() {
		clearInterval(this.timer);
	}
}
</script>

<style lang="scss" scoped>
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.daka {
	margin-top: 12px;
	@include flex(12px, normal, normal, column);
	flex: 1;

	.person-info {
		background-color: #fff;
		border-radius: var(--app-radius);
		@include flex;
		padding: 8px;
		font-size: 16px;
		color: #000;

		.avatar {
			width: 48px;
			height: 48px;
			border-radius: 8px;
			overflow: hidden;
		}

		.info {
			margin: 0 auto 0 0;

			.name {
				font-weight: bold;
				margin-bottom: 4px;
			}

			.office {
				font-size: 14px;
			}
		}

		.more {
			@include flex(0px);
			cursor: pointer;
			margin-left: 8px;
		}
	}

	.work-time {
		background-color: #fff;
		padding: 12px 16px;
		border-radius: var(--app-radius);

		.title {
			color: #000;
			font-weight: bold;
			font-size: 16px;
			@include flex(0, space-between);

			.right {
				font-size: 14px;
				color: #666;
				font-weight: inherit;
			}
		}

		.content {
			margin-top: 4px;
			@include flex(0, space-between);
			font-size: 16px;
			color: #666;

			.item {
				@include flex(4px);
				font-size: 16px;
			}
		}
	}

	.controll {
		background-color: #fff;
		border-radius: var(--app-radius);
		padding: 4px 12px;
		flex: 1;
		margin-bottom: 12px;
		position: relative;

		.tabs {
			@include flex(0, space-between);
			font-size: 16px;
			color: #666;

			.item {
				padding: 12px 0;
				flex: 1;
				text-align: center;

				&.active {
					color: #000;
					font-weight: bold;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 25%;
						height: 4px;
						background-color: var(--app-color);
						border-radius: var(--app-radius);
					}
				}
			}
		}

		.show {
			.top {
				margin-top: 16px;
				@include flex(12px, space-between, center);
				border-radius: var(--app-radius);
				overflow-x: scroll;

				.item {
					flex: 1;
					font-size: 16px;
					font-weight: bold;
					border-radius: var(--app-radius);
					position: relative;
					padding: 16px;

					.title {
						margin-bottom: 4px;
					}

					.record {
						font-size: 14px;
						white-space: nowrap;
						@include flex(4px, normal, baseline);

						.tag {
							font-size: 10px;
							padding: 0 4px;
							border-radius: 2px;
							color: #fff;
						}
					}
				}
			}

			.big-btn-daka {
				.big-btn {
					width: 120px;
					height: 120px;
					margin: 0 auto;
					border-radius: 50%;
					background: linear-gradient(180deg, var(--daka-bg-color1) 0%, var(--daka-bg-color2) 100%);
					@include flex(8px, center, center, column);
					position: relative;
					color: #fff;
					font-size: 16px;
					font-weight: bold;

					.z-index-1 {
						position: relative;
						z-index: 1;
					}

					&::before {
						content: '';
						position: absolute;
						width: 140px;
						height: 140px;
						background-color: var(--daka-bg-color2);
						border-radius: 50%;
						animation: scale 2s linear infinite;
						opacity: 0.08;
					}

					&::after {
						content: '';
						position: absolute;
						width: 160px;
						height: 160px;
						border-radius: 50%;
						background-color: var(--daka-bg-color2);
						animation: scale 2s linear infinite;
						opacity: 0.05;
					}
				}

				.alert {
					font-size: 16px;
					color: var(--app-color);
					text-align: center;
					margin-top: 32px;
					margin-bottom: 24px;
					@include flex(8px, center, center, column);

					.flex {
						@include flex(4px, center, center);
					}

					.btn {
						padding: 2px 0;
						width: 160rpx;
						height: 50rpx;
						line-height: 50rpx;
						@include flex(0, center, center);
						border-radius: 4px;
						text-align: center;
						color: var(--app-color);
						background-color: rgba($color: var(--app-color-rgb), $alpha: .1);
						border: 1px solid var(--app-color);
						border-radius: var(--app-radius);
						font-size: 14px;
						margin: 0 8px;
					}
				}
			}
		}

		.noWork {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			@include flex(12px, center, center, column);

			font-size: 16px;
			color: #999999;
			text-align: center;
		}
	}
}

.loading {
	@include flex(0, center, center);
	height: 100vh;
}

@keyframes scale {
	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.01);
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(0.99);
	}

	100% {
		transform: scale(1);
	}
}
</style>